<template>
  <Layout ref="load" class="property-balance bg-f8">
    <Navbar :title="navbarTitle" />
    <div>
      <van-cell-group class="cell-group card-group-box">
        <van-cell class="cell">
          <div>可用{{$store.state.member.memberSetText.balance_style}}</div>
          <van-row type="flex" justify="space-between" class="box">
            <span class="text">{{can_use_money | yuan}}</span>
            <van-button size="small" @click="$router.push('/property/log')">查看明细</van-button>
          </van-row>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="cell-group card-group-box">
        <van-cell
          :title="'总'+$store.state.member.memberSetText.balance_style"
          :label="$store.state.member.memberSetText.balance_style+'总数'"
          :value="balance | yuan"
          class="text"
        />
        <van-cell
          :title="'冻结'+$store.state.member.memberSetText.balance_style"
          :label="'已经冻结'+$store.state.member.memberSetText.balance_style"
          :value="freezing_balance | yuan"
          class="text"
        />
      </van-cell-group>
      <div class="foot-btn-group">
        <van-button size="normal" block round type="danger" to="/property/recharge">充值</van-button>
        <van-button
          size="normal"
          block
          plain
          round
          type="danger"
          :disabled="isWithdraw"
          to="/property/withdraw"
        >{{withdrawBtnText}}</van-button>
      </div>
    </div>
  </Layout>
</template>

<script>
import sfc from "@/utils/create";
import { GET_ASSETBALANCE } from "@/api/property";
export default sfc({
  name: "property-balance",
  data() {
    return {
      is_use: 0,
      balance: "",
      can_use_money: 0,
      freezing_balance: ""
    };
  },
  computed: {
    navbarTitle() {
      const { balance_style } = this.$store.state.member.memberSetText;
      let title = balance_style;
      document.title = title;
      return title;
    },
    isWithdraw() {
      return this.is_use && this.is_use == 1
        ? this.can_use_money && this.can_use_money > 0
          ? false
          : true
        : true;
    },
    withdrawBtnText() {
      return this.is_use && this.is_use == 1
        ? this.can_use_money && this.can_use_money > 0
          ? "提现"
          : "可用" +
            this.$store.state.member.memberSetText.balance_style +
            "为0，不可提现"
        : "未开启提现";
    }
  },
  activated() {
    const $this = this;
    if (this.navbarTitle) {
      document.title = this.navbarTitle;
    }
    GET_ASSETBALANCE()
      .then(({ data }) => {
        $this.is_use = data.is_use;
        $this.balance = data.balance ? data.balance : 0;
        $this.can_use_money = data.can_use_money ? data.can_use_money : 0;
        $this.freezing_balance = data.freezing_balance
          ? data.freezing_balance
          : 0;
        $this.$refs.load.success();
      })
      .catch(() => {
        $this.$refs.load.fail();
      });
  }
});
</script>

<style scoped>
.cell {
  padding: 20px 15px;
}

.cell-group .box {
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.cell-group .box .text {
  color: #ff454e;
  font-size: 20px;
}

.cell-group .text >>> .van-cell__value {
  color: #ff454e;
  font-size: 20px;
  line-height: 38px;
}

.foot-btn-group .btn {
  margin-bottom: 15px;
}
</style>
